<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <lightplate class="lightplate" :index="100"></lightplate>
        <div>
          <title-card title="所需依赖"></title-card>
          <pre-code :code="npm" language="bash" />
          <title-card title="转盘动画"></title-card>
          <pre-code :code="anime" language="css" />
          <title-card title="滚动动画"></title-card>
          <pre-code :code="code" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="Turntable">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from '@/components/TitleCard/index.vue';
import Lightplate from './Lightplate/index.vue';
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const npm = ref(`npm install animejs`);
const code = ref(`import anime from 'animejs'
import { guid } from "@/utils/index.js"
import { onMounted, toRefs } from 'vue'

const Props = defineProps({
  index: {
    type: Number,
    default:  0
  }
})
const { index } = toRefs(Props)

const itemClass = ref("")

const randomNumber = () => {
  itemClass.value = guid();
}

randomNumber();

onMounted(() => {
  var elements = document.querySelector('.index-span'+itemClass.value);
  anime({
    targets: elements,
    value: [0, index.value],
    round: 1,
    duration: 3000,
    easing: 'easeInOutExpo'
  });
})`)
const anime = ref(`<div class="Lightplate">
<div class="text">
  <input :class="'index-span index-span' + itemClass" :readOnly="true" />
</div>
<div class="bg-light"></div>
<div class="bottom-point">
  <div></div>
</div>
<div class="dipan"></div>
</div>

<style lang="scss" scoped>
@keyframes opacity {
    0% {
      opacity: 0.25;
    }
    25% {
      opacity: 0.5;
    }
    50% {
      opacity: 0.7;
    }
    75% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.25;
    }
}
@keyframes rotate {
    0% {
      transform: rotateZ(0deg) scaleX(1) scaleY(1) translateX(0px) translateY(0px);
    }
    50% {
      transform: rotateZ(180deg) scaleX(1) scaleY(1) translateX(0px) translateY(0px);
    }
    100% {
      transform: rotateZ(360deg) scaleX(1) scaleY(1) translateX(0px) translateY(0px);
    }
}
.Lightplate {
  width: 175px;
  height: 115px;
  position: relative;
}
.text {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  z-index: 10;
  .index-span {
    width: 174px;
    font-family: "Humanist777BT-BlackCondensedB";
    font-size: 50px;
    color: #FFFFFF;
    text-shadow: 0 0 10px #05a3ea;
    font-weight: 400;
    background:none;  
    outline:none;  
    border:0px; 
    text-align: center; 
  }
}
.bg-light {
  position: absolute;
  width: 175px;
  height: 94px;
  background: url("../../../../assets/images/Lightplate/img_bjg.png");
  background-repeat: no-repeat;
  background-size: cover;
  animation: opacity 1s infinite;
}
.bottom-point {
  position: absolute;
  bottom: -18px;
  left: 50%;
  margin-left: -48px;
  width: 96px;
  height: 96px;
  transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) rotateX(65deg) !important;
  
  & > div {
    width: 96px;
    height: 96px;
    background: url("../../../../assets/images/Lightplate/img_btmpoint.png");
    background-repeat: no-repeat;
    background-size: cover;
    animation: rotate 10s linear infinite;
  }
}
.dipan {
  position: absolute;
  bottom:  -10px;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 70px;
  background: url("../../../../assets/images/Lightplate/img_dipan.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
  `);

const getTitle = () => {
  postArticleDetail({
    route: 'Turntable',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>

<style lang="scss" scoped>
.lightplate {
  margin: 0 auto;
}
</style>
